<template>
  <div :class="className">
    <div v-html="css"></div>
    <div v-if="isChoose !== '/category' && isChoose !== '/cart' && isChoose !== '/member/extension'" :style="{ height: fun.isIphoneX() ? 84 + 'px' : 50 + 'px' }"></div>

    <div v-if="show" class="advertising-preview" :style="{ width: clientWidth + 'px' }" :class="[fun.isIphoneX() ? 'iphoneXStyle' : '']">
      <ul class="weixin-menu flex-a-c" id="weixin-menu" :style="{ width: clientWidth + 'px' }">
        <li
          :key="i"
          v-for="(btn, i) in menu_button"
          class="menu-item flex-a-c flex-j-c"
          :style="{ maxWidth: 100 / menu_button.length + '%' }"
          :class="{ current: isChoose == urlParse(btn.link) || page_id == urlParse(btn.link) }"
          @click="selectedMenu(i, btn)"
        >
          <div
            class="menu-item-title flex-a-c flex-j-c"
            :style="{
              flexDirection: tab_style.icon_set.icon_position == 'top' ? 'column' : 'row'
            }"
            :class="showBadge(btn) ? 'posNew' : ''"
          >
            <i class="menu-icon iconfont" v-if="btn.isIcon == '1' && tab_style.icon_set.icon_show" :class="[btn.isIcon == '1' ? btn.icon || 'icon-fenlei4' : '']"></i>
            <div :class="tab_style.text_set.text_show && btn.text ? 'img-text': 'only-img' " v-if="btn.isIcon == '2' && tab_style.icon_set.icon_show" >
              <img class="icon-img" :class="[seletedId === btn.id && !btn.text && selectedMenuIndex ? 'rotateImg' : 'normalImg', btn.currentImage ? 'hasCurrentImage': '']" :src="btn.image || emptyImage" alt="" />
              <img class="icon-img currentImage" :src="btn.currentImage" alt="" v-if="btn.currentImage"/>
            </div>
            <div class="hide-box" v-if="tab_style.icon_set.icon_position == 'top' && btn.isIcon != '3'" style="height: 10px;"></div>
            <span
              class="menu-text"
              v-if="tab_style.text_set.text_show && btn.text"
              :style="{ display: tab_style.icon_set.icon_position == 'top' ? 'block' : '', marginLeft: tab_style.icon_set.icon_position == 'top' ? '' : '2px' }"
              >{{ btn.text }}</span
            >
            <div :class="getBadgeNum(btn) < 10 ? 'newTbox1' : getBadgeNum(btn) < 99 ? 'newTbox2' : 'newTbox3'" v-if="showBadge(btn) && getBadgeNum(btn) > 0">
              <div class="colorTxt">{{ getBadgeNum(btn) > 999 ? "999+" : getBadgeNum(btn) }}</div>
            </div>
          </div>
          <div class="minLink" v-if="btn.isMinApp == 2 && btn.sub_button && btn.sub_button.length <= 0 && !fun.isApp() && !fun.isCPS()" @click.stop v-html="btn.html"></div>

          <ul class="weixin-sub-menu"
              :class="{'showBlock':selectedMenuIndex === i && btn.sub_button && btn.sub_button.length > 0,'Circle-main': tab_style.children_set.circle_show }">
            <!-- v-show="selectedMenuIndex === i && btn.sub_button && btn.sub_button.length > 0" -->
            <li
              :key="i2"
              v-for="(sub, i2) in btn.sub_button"
              class="menu-sub-item"
              :style="tab_style.children_set.circle_show?(selectedMenuIndex === i ? getSubPosition(btn.sub_button,i2) : { top: '160px',left: '100px' }):{}"
              :class="{ current: isChoose == urlParse(sub.link) || page_id == urlParse(sub.link)}"
              @click.stop="selectedSubMenu(i2, sub)"
            >
              <div
                class="menu-item-title"
                :style="{
                  lineHeight: tab_style.icon_set.icon_position == 'top' && tab_style.icon_set.icon_show && tab_style.text_set.text_show && sub.isIcon != '3' ? '25px' : '50px',
                  paddingTop: tab_style.icon_set.icon_position == 'top' ? '2px' : ''
                }"
              >
                <i class="menu-icon iconfont" v-if="sub.isIcon == '1' && tab_style.icon_set.icon_show" :class="[sub.isIcon == '1' ? sub.icon || 'icon-fenlei4' : '']"></i>
                <template v-if="sub.isIcon == '2' && tab_style.icon_set.icon_show">
                  <img class="icon-img" :class="[tab_style.text_set.text_show && sub.text ? 'img-text': 'only-img', sub.currentImage ? 'hasCurrentSubImage': '']" :src="sub.image || emptyImage" alt="" />
                  <img class="icon-img currentSubImage" :class="tab_style.text_set.text_show && sub.text ? 'img-text': 'only-img' " :src="sub.currentImage || emptyImage" alt="" v-if="sub.currentImage"/>
                </template>
                <span
                  class="menu-text"
                  v-if="tab_style.text_set.text_show"
                  :style="{ display: tab_style.icon_set.icon_position == 'top' ? 'block' : '', marginLeft: tab_style.icon_set.icon_position == 'top' ? '' : '2px' }"
                  >{{ sub.text }}</span
                >
              </div>
              <div class="minLink" v-if="sub.isMinApp == 2 && !fun.isApp() && !fun.isCPS()" @click.stop v-html="sub.html"></div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <van-overlay :show="showOverlay" z-index='1008'/>
  </div>
</template>

<script>
import emptyImage from "../../assets/images/new_diy/image.png";

const css = function() {
  if (this.datas) {
    const { tab_style } = this.datas;
    return `
	      .component-${this.id} .menu-item .menu-item-title span{
	          color: ${tab_style.value.text_set.text_color || "#333333"};
	      }

	      .component-${this.id} .menu-item.current .menu-item-title span{
	          color: ${tab_style.value.text_set.text_choose_color || "#333333"};
	      }

	      .component-${this.id} .menu-item .menu-item-title .iconfont{
	          color: ${tab_style.value.icon_set.icon_color || "#333333"};
	          display: ${tab_style.value.icon_set.icon_show ? "" : "none"};
	      }

	      .component-${this.id} .menu-item.current .menu-item-title .iconfont{
	          color: ${tab_style.value.icon_set.icon_choose_color || "#333333"};
	          display: ${tab_style.value.icon_set.icon_show ? "" : "none"};
	      }

	      .component-${this.id} .menu-item .menu-item-title .hide-box {
	          display: ${tab_style.value.icon_set.icon_show ? "none" : ""};
	      }

	      .component-${this.id} .menu-item.current .menu-item-title  .hide-box {
	          display: ${tab_style.value.icon_set.icon_show ? "none" : ""};
	      }

        .component-${this.id} .menu-item.current .menu-item-title .hasCurrentImage,
        .component-${this.id} .advertising-preview .weixin-sub-menu .menu-sub-item.current .menu-item-title .hasCurrentSubImage {
	          display: none!important;
	      }
        .component-${this.id} .menu-item.current .menu-item-title .currentImage,
        .component-${this.id} .advertising-preview .weixin-sub-menu .menu-sub-item.current .menu-item-title .currentSubImage {
	          display: block!important;
	      }

	      .component-${this.id} .advertising-preview {
	          background-color: ${tab_style.value.bg_set.transparent?'transparent': (tab_style.value.bg_set.bg_color || "#ffffff")};
	      }

	      .component-${this.id} .advertising-preview .menu-item {
	          background-color: ${tab_style.value.bg_set.transparent?'transparent': (tab_style.value.bg_set.bg_color || "#ffffff")};
	          border: ${tab_style.value.border_set.border_show ? "1" : "0"}px solid ${tab_style.value.border_set.border_color || "#333333"};
	      }

	      .component-${this.id} .advertising-preview .menu-item.current {
	          background-color: ${tab_style.value.bg_set.transparent?'transparent': (tab_style.value.bg_set.bg_choose_color || "#ffffff")};
	          border: ${tab_style.value.border_set.border_show ? "1" : "0"}px solid ${tab_style.value.border_set.border_choose_color || "#333333"};
	      }

	      .component-${this.id} .advertising-preview .menu-sub-item {
	          border: ${tab_style.value.border_set.border_show ? "1" : "0"}px solid ${tab_style.value.border_set.border_color || "#333333"};
            border-bottom: ${tab_style.value.border_set.border_show ? "2" : "0"}px solid ${tab_style.value.border_set.border_color || "#333333"};

	      }
	      .component-${this.id} .advertising-preview .menu-sub-item.current {
	          border: ${tab_style.value.border_set.border_show ? "1" : "0"}px solid ${tab_style.value.border_set.border_choose_color || "#333333"};
            border-bottom: ${tab_style.value.border_set.border_show ? "2" : "0"}px solid ${tab_style.value.border_set.border_choose_color || "#333333"};
	      }

	      .component-${this.id} .advertising-preview .weixin-sub-menu .menu-sub-item .menu-item-title {
	        background-color: ${tab_style.value.children_set.children_bg_color || "#ffffff"};
	      }

	      .component-${this.id} .advertising-preview .weixin-sub-menu .menu-sub-item .menu-item-title span,
	      .component-${this.id} .advertising-preview .weixin-sub-menu .menu-sub-item .menu-item-title i{
	        color: ${tab_style.value.children_set.children_color || "#333333"};
	      }

	      .component-${this.id} .advertising-preview .weixin-sub-menu .menu-sub-item.current .menu-item-title span,
	      .component-${this.id} .advertising-preview .weixin-sub-menu .menu-sub-item.current .menu-item-title i{
	        color: ${tab_style.value.children_set.children_choose_color || "#333333"};
	      }
    `;
  }
};

const defaultData = {
  page_info: {
    group_title: { title: "首页", type: "text", value: "默认" },
    button_item: {
      title: "",
      type: "bottomItem",
      choose: "2",
      menu_button: [
        {
          id: 0,
          text: "首页",
          image: "",
          icon: "icon-fontclass-shouye",
          isIcon: "1",
          link: "/addons/yun_shop/?menu#/home?i=",
          isMinApp: "1",
          gh_id: "",
          minApp_link: "",
          sub_button: [],
          isDefault: true,
          url: "home"
        },
        {
          id: 1,
          text: "分类",
          image: "",
          icon: "icon-fontclass-fenlei",
          isIcon: "1",
          link: "/addons/yun_shop/?menu#/category?i=",
          isMinApp: "1",
          gh_id: "",
          minApp_link: "",
          sub_button: [],
          isDefault: true,
          url: "category"
        },
        {
          id: 2,
          text: "推广",
          image: "",
          icon: "icon-fontclass-tuiguang1",
          isIcon: "1",
          link: "/addons/yun_shop/?menu#/member/extension?i=",
          isMinApp: "1",
          gh_id: "",
          minApp_link: "",
          sub_button: [],
          isDefault: true,
          url: "extension"
        },
        {
          id: 3,
          text: "购物车",
          image: "",
          icon: "icon-fontclass-gouwuche1",
          isIcon: "1",
          link: "/addons/yun_shop/?menu#/cart?i=",
          isMinApp: "1",
          gh_id: "",
          minApp_link: "",
          sub_button: [],
          isDefault: true,
          url: "cart"
        },
        {
          id: 4,
          text: "会员中心",
          image: "",
          icon: "icon-fontclass-huiyuanzhongxin",
          isIcon: "1",
          link: "/addons/yun_shop/?menu#/member?i=",
          isMinApp: "1",
          gh_id: "",
          minApp_link: "",
          sub_button: [],
          isDefault: true,
          url: "member"
        }
      ],
      value: {}
    },
    tab_style: {
      title: "",
      type: "tab",
      value: {
        text_set: { text_show: true, text_color: "#333333", text_choose_color: "#ff4949" },
        icon_set: { icon_show: true, icon_position: "top", icon_color: "#333333", icon_choose_color: "#ff4949" },
        border_set: { border_show: false, border_color: "#e7e7eb", border_choose_color: "#29ba9c" },
        bg_set: { bg_color: "#ffffff", bg_choose_color: "#ffffff" },
        children_set: { children_color: "#333333", children_choose_color: "#29ba9c", children_bg_color: "#ffffff" }
      }
    }
  }
};

const companyData = {
  // page_info: {"group_title":{"title":"企业微信侧边栏","type":"text","value":"默认"},"button_item":{"title":"","type":"bottomItem","choose":"2","menu_button":[{"id":0,"text":"首页","image":"","icon":"icon-fontclass-shouye2","isIcon":"1","link":"/addons/yun_shop/?menu#/workWechatSidebar/index?i=","isMinApp":"1","gh_id":"","minApp_link":"","sub_button":[], "isDefault": true, "url": 'sidebarIndex'},{"id":1,"text":"客户","image":"","icon":"icon-massage_client","isIcon":"1","link":"/addons/yun_shop/?menu#/workWechatSidebar?i=","isMinApp":"1","gh_id":"","minApp_link":"","sub_button":[], "isDefault": true, "url": 'workWechatSidebar'},{"id":3,"text":"我的","image":"","icon":"icon-fontclass-huiyuanzhongixn","isIcon":"1","link":"/addons/yun_shop/?menu#/member?i=","isMinApp":"1","gh_id":"","minApp_link":"","sub_button":[], "isDefault": true, "url": 'member'}],"value":{}},"tab_style":{"title":"","type":"tab","value":{"text_set":{"text_show":true,"text_color":"#333333","text_choose_color":"#ff4949"},"icon_set":{"icon_show":true,"icon_position":"top","icon_color":"#333333","icon_choose_color":"#ff4949"},"border_set":{"border_show":false,"border_color":"#e7e7eb","border_choose_color":"#29ba9c"},"bg_set":{"bg_color":"#ffffff","bg_choose_color":"#ffffff"},"children_set":{"children_color":"#333333","children_choose_color":"#29ba9c","children_bg_color":"#ffffff"}}}}
  page_info: {
    group_title: { title: "企业微信侧边栏", type: "text", value: "默认" },
    button_item: {
      title: "",
      type: "bottomItem",
      choose: "2",
      menu_button: [
        {
          id: 0,
          text: "首页",
          image: "",
          icon: "icon-fontclass-shouye2",
          isIcon: "1",
          link: "/addons/yun_shop/?menu#/workWechatSidebar/index?i=",
          isMinApp: "1",
          gh_id: "",
          minApp_link: "",
          sub_button: [],
          isDefault: true,
          url: "sidebarIndex"
        },
        {
          id: 1,
          text: "客户",
          image: "",
          icon: "icon-massage_client",
          isIcon: "1",
          link: "/addons/yun_shop/?menu#/workWechatSidebar?i=",
          isMinApp: "1",
          gh_id: "",
          minApp_link: "",
          sub_button: [],
          isDefault: true,
          url: "workWechatSidebar"
        },
        {
          id: 2,
          text: "客户管理",
          image: "",
          icon: "icon-massage_client",
          isIcon: "1",
          link: "/addons/yun_shop/?menu#/workWechatSidebar/customer?i=",
          isMinApp: "1",
          gh_id: "",
          minApp_link: "",
          sub_button: [],
          isDefault: true,
          url: "customerManagement"
        }
      ],
      value: {}
    },
    tab_style: {
      title: "",
      type: "tab",
      value: {
        text_set: { text_show: true, text_color: "#333333", text_choose_color: "#ff4949" },
        icon_set: { icon_show: true, icon_position: "top", icon_color: "#333333", icon_choose_color: "#ff4949" },
        border_set: { border_show: false, border_color: "#e7e7eb", border_choose_color: "#29ba9c" },
        bg_set: { bg_color: "#ffffff", bg_choose_color: "#ffffff" },
        children_set: { children_color: "#333333", children_choose_color: "#29ba9c", children_bg_color: "#ffffff" }
      }
    }
  }
};

const supplier_alone_Data = {
  // 供应商独立模板
  page_info: {
    group_title: { title: "供应商独立模板", type: "text", value: "默认" },
    button_item: {
      title: "",
      type: "bottomItem",
      choose: "2",
      menu_button: [
        {
          id: 0,
          text: $i18n.t('base.home'),
          image: "",
          icon: "icon-fontclass-shouye2",
          isIcon: "1",
          link: "/addons/yun_shop/?menu#/alone_template/supplier/home?i=",
          isMinApp: "1",
          gh_id: "",
          minApp_link: "",
          sub_button: [],
          isDefault: true,
          url: "aloneSupplierHome"
        },
        {
          id: 1,
          text: $i18n.t('base.category'),
          image: "",
          icon: "icon-fontclass-fenlei",
          isIcon: "1",
          link: "/addons/yun_shop/?menu#/category?i=",
          isMinApp: "1",
          gh_id: "",
          minApp_link: "",
          sub_button: [],
          isDefault: true,
          url: "category"
        },
        {
          id: 3,
          text: $i18n.t('base.cart'),
          image: "",
          icon: "icon-fontclass-gouwuche1",
          isIcon: "1",
          link: "/addons/yun_shop/?menu#/cart?i=",
          isMinApp: "1",
          gh_id: "",
          minApp_link: "",
          sub_button: [],
          isDefault: true,
          url: "cart"
        },
        {
          id: 4,
          text: $i18n.t('base.memberCenter'),
          image: "",
          icon: "icon-fontclass-huiyuanzhongxin",
          isIcon: "1",
          link: "/addons/yun_shop/?menu#/supplier_alone_member?i=",
          isMinApp: "1",
          gh_id: "",
          minApp_link: "",
          sub_button: [],
          isDefault: true,
          url: "supplier_alone_member"
        }
      ],
      value: {}
    },
    tab_style: {
      title: "",
      type: "tab",
      value: {
        text_set: { text_show: true, text_color: "#333333", text_choose_color: "#ff4949" },
        icon_set: { icon_show: true, icon_position: "top", icon_color: "#333333", icon_choose_color: "#ff4949" },
        border_set: { border_show: false, border_color: "#e7e7eb", border_choose_color: "#29ba9c" },
        bg_set: { bg_color: "#ffffff", bg_choose_color: "#ffffff" },
        children_set: { children_color: "#333333", children_choose_color: "#29ba9c", children_bg_color: "#ffffff" }
      }
    }
  }
};

export default {
  props: ["id", "diydatas", "foot_type"],
  data() {
    return {
      showOverlay: false,
      seletedId: "", //当前选中菜单id
      selectedMenuIndex: "", //当前选中菜单索引
      selectedSubMenuIndex: "", //当前选中子菜单索引
      clientWidth: "375",
      show: true,
      emptyImage,
      defaultData,
      companyData,
      supplier_alone_Data,
      basic_info: [],
      page_id: 0
    };
  },
  watch: {
    menu_button: {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          if (this.menu_button.length > 0 && !this.menu_button[0].html) {
            this.initMenuButton();
          }
        });
        try {
          let info_basic = JSON.parse(localStorage.getItem("yz_basic_info"));
          this.basic_info = info_basic.plugin_setting.instation_message;
        } catch (error) {
          this.basic_info = false;
        }
      },
      deep: true
    },
    isChoose(val) {
      this.selectedMenuIndex = "";
    },
    datas: {
      handler(newValue, oldValue) {
        this.show = true;
        if (this.isChoose === "/home") {
          // 首页有三种情况
          if (this.$store.state.temp.item.foot_type == -1) {
            // 不显示
            this.show = false;
          } else if (this.$store.state.temp.item.foot_type == 2) {
            // 显示自定义的底部导航
            if (this.$store.state.temp.item.foot instanceof Array) {
              this.show = false;
            }
          }
        }
      },
      deep: true
    }
  },
  computed: {
    isChoose() {
      return this.$route.path;
    },
    // page_id() {
    //   return this.fun.getKey("page_id");
    // },
    datas() {
      // JSON.parse(this.$store.state.temp.item.foot.page_info)  首页的导航
      // JSON.parse(this.$store.state.temp.item.menus.page_info)  列表默认的导航
      // defaultData  系统默认导航  写死的
      if (this.diydatas) {
        if (this.diydatas.defaultData) {
          return this.defaultData.page_info;
        } else {
          // console.log(this.diydatas,this.fun.isCPS(),'isCPS');   // 装修的导航
          return this.diydatas;
        }
      } else {
        if (this.isChoose === "/home") {
          // 首页有三种情况
          if (this.$store.state.temp.item.foot_type == -1) {
            // 不显示
            return [];
          } else if (this.$store.state.temp.item.foot_type == 1) {
            // 显示默认
            if (!this.$store.state.temp.item.menus) {
              // 显示系统默认
              return this.defaultData.page_info;
            } else {
              // 显示列表设置的默认
              return JSON.parse(this.$store.state.temp.item.menus.page_info);
            }
          } else if (this.$store.state.temp.item.foot_type == 2) {
            // 显示自定义的底部导航
            if (this.$store.state.temp.item.foot instanceof Array) {
              return [];
            } else {
              return this.$store.state.temp.item.foot && this.$store.state.temp.item.foot.page_info ? JSON.parse(this.$store.state.temp.item.foot.page_info) : this.defaultData.page_info;
            }
          } else {
            // 什么都没开启的情况下显示新的默认
            if (!this.$store.state.temp.item.menus || this.$store.state.temp.item.menus.length <= 0) {
              // 显示系统默认
              return this.defaultData.page_info;
            } else {
              // 显示列表设置的默认
              return JSON.parse(this.$store.state.temp.item.menus.page_info);
            }
          }
        } else {
          // 非首页的有两种情况

          // 之前的判断 this.fun.getKey("client") === "work" || window.localStorage.getItem("client")
          let showCompanyBarPage = ["workWechatSidebar", "sidebarIndex", "sideOrderdetail", "customerManagement"];
          let supplier_alone_id = this.fun.getKey('supplier_alone_id') || sessionStorage.getItem("supplier_alone_id");
          if (showCompanyBarPage.includes(this.$route.name)) {
            // 显示企业微信默认
            return this.companyData.page_info;
          } else if(supplier_alone_id) {
            // 显示供应商alone默认
            return this.supplier_alone_Data.page_info;
          } else if (!this.$store.state.temp.item.menus) {
            // 显示系统默认
            return this.defaultData.page_info;
          } else {
            // console.log(this.$store.state.temp.item.menus.page_info)
            // 显示列表设置的默认
            return JSON.parse(this.$store.state.temp.item.menus.page_info);
          }
        }
      }
    },
    menu_button() {
      if (this.datas) {
        return this.datas.button_item.menu_button || {};
      } else {
        return {};
      }
    },
    tab_style() {
      if (this.datas) {
        return this.datas.tab_style.value;
      } else {
        return {};
      }
    },
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },
  activated() {
    if (this.fun.getPhoneEnv() == 3) {
      this.clientWidth = 375;
    } else {
      this.clientWidth = document.body.clientWidth;
    }
  },
  mounted() {
    if (this.fun.getPhoneEnv() == 3) {
      this.clientWidth = 375;
    } else {
      this.clientWidth = document.body.clientWidth;
    }

    this.$nextTick(() => {
      if (this.datas) {
        this.initMenuButton();
      }
    });
  },
  methods: {
    showBadge(btn) {
      // 是否显示徽标数字
      let { url, link } = btn;
      if ((url == "member" || this.ischeck(link, "/member?") != "-1") && this.basic_info && this.basic_info.enable == 1) {
        return true;
      }
      if (url == "cart" || this.ischeck(link, "/cart?") != "-1") {
        return true;
      }
    },
    getBadgeNum(btn) {
      // 是否显示徽标数字
      let { url, link } = btn;
      if (url == "member" || this.ischeck(link, "/member?") != "-1") {
        return this.basic_info.total;
      }
      if (url == "cart" || this.ischeck(link, "/cart?") != "-1") {
        return this.$store.state.cart_num;
      }
    },
    ischeck(str, url) {
      let strin = str;
      return strin.indexOf(url);
    },
    initMenuButton() {
      this.page_id = this.fun.getKey("page_id");
      try {
        let info_basic = JSON.parse(localStorage.getItem("yz_basic_info"));
        this.basic_info = info_basic.plugin_setting.instation_message;
      } catch (error) {
        this.basic_info = false;
      }
      this.show = false;
      for (let i = 0; i < this.menu_button.length; i++) {
        let script = document.createElement("script");
        script.type = "text/wxtag-template";
        script.text = `<div style="width: ${this.clientWidth / this.menu_button.length}px;height: 50px;"></div>`;
        this.menu_button[i].html = `<wx-open-launch-weapp username="${this.menu_button[i].gh_id}" path="${this.menu_button[i].minApp_link}">${script.outerHTML}</wx-open-launch-weapp>`;

        for (let j = 0; j < this.menu_button[i].sub_button.length; j++) {
          let script = document.createElement("script");
          script.type = "text/wxtag-template";
          script.text = `<div style="width: ${this.clientWidth / this.menu_button.length}px;height: 50px;"></div>`;
          this.menu_button[i].sub_button[
            j
          ].html = `<wx-open-launch-weapp username="${this.menu_button[i].sub_button[j].gh_id}" path="${this.menu_button[i].sub_button[j].minApp_link}">${script.outerHTML}</wx-open-launch-weapp>`;
        }
      }

      this.menu_button.reverse().reverse(); //改变原始数组从而更新数组
      console.log(this.menu_button);
      this.show = true;
    },
    /**
     * 处理数据
     * @param {String} datas
     * **/
    handle_data(datas) {
      let handleDatas = {};
      Object.keys(datas).map(key => {
        handleDatas[key] = datas[key].value;
      });
      return handleDatas;
    },
    //选中主菜单
    selectedMenu(i, item) {
      let params = {};
      if(item.isMinApp == 2 && this.fun.isWindVane()) {
        // "appId":"小程序appid",
        params = { target: `wxmp://jumpmp:{"originId": ${item.gh_id},"path":${item.minApp_link},"extraData":{"from":"app"}}`  };
        window.WindVane.call('SBase','navigationTo',params,function(e){},function(e){});
        return;
      }
      if(item.isMinApp == 2 ) {
        if(this.fun.isApp()){
          return YDB.MiniWX(item.gh_id, item.minApp_link);
        }
        if(this.fun.isCPS() && this.fun.isCPSAPPI()) {
          let json = {
            mini_route: item.minApp_link,
            mini_id: item.gh_id
          };
          if (this.fun.isIosOrAndroid() === "ios") {
            miniWXIOS({ body: "miniWXIOS", json: JSON.stringify(json) });
          } else {
            miniWXAndroid(JSON.stringify(json));
          }
          return;
        }
      }
      this.selectedSubMenuIndex = "";

      if (this.selectedMenuIndex === i) {
        this.selectedMenuIndex = "";
        this.showOverlay = false;
        return;
      }

      this.selectedMenuIndex = i;

      let selectedMenu = this.menu_button[this.selectedMenuIndex];
      if (selectedMenu) {
        this.seletedId = selectedMenu.id;
      }

      if (item.sub_button.length <= 0) {
        if (this.fun.isCPS() && this.fun.isCPSAPPI() && item.isMinApp == "6") {
          let json = item.app_link;
          console.log(json)
          if (this.fun.isIosOrAndroid() === "ios") {
            toAPPUrlIOS({ body: "toAPPUrlIOS", json: JSON.stringify(json) });
          } else {
            console.log('toAPPUrlAndroid===========',JSON.stringify(json))
            toAPPUrlAndroid(JSON.stringify(json));
          }
        } else if (item.link && item.link !== window.location.href) {
          if (item.isDefault) {
            this.$router.push(this.fun.getUrl(item.url));
          } else {
            let URL = item.link;
            if (this.fun.getKeyByMid()) {
              URL = this.fun.changeUrlArg(item.link, "mid", this.fun.getKeyByMid());
            }
            if(this.fun.isWindVane()) {
              params = { target: URL };
              window.WindVane.call('SBase','navigationTo',params,function(e){},function(e){});
              return;
            }
            window.location.href = URL;
          }
        }
      } else {
        this.showOverlay = true;
      }
    },
    //选中子菜单
    selectedSubMenu(i, item) {
      this.showOverlay = false;
      this.selectedSubMenuIndex = i;
      let selectedSubMenu = this.menu_button[this.selectedMenuIndex].sub_button[this.selectedSubMenuIndex];
      this.seletedId = selectedSubMenu.id;
      let params = {};
      if(item.isMinApp == 2 && this.fun.isWindVane()) {
        // "appId":"小程序appid",
        params = { target: `wxmp://jumpmp:{"originId": ${item.gh_id},"path":${item.minApp_link},"extraData":{"from":"app"}}`  };
        window.WindVane.call('SBase','navigationTo',params,function(e){},function(e){});
        return;
      }
      if(item.isMinApp == 2 ) {
        if(this.fun.isApp()) {
          return YDB.MiniWX(item.gh_id, item.minApp_link);
        }
        if(this.fun.isCPS() && this.fun.isCPSAPPI()) {
          let json = {
            mini_route: item.minApp_link,
            mini_id: item.gh_id
          };
          if (this.fun.isIosOrAndroid() === "ios") {
            miniWXIOS({ body: "miniWXIOS", json: JSON.stringify(json) });
          } else {
            miniWXAndroid(JSON.stringify(json));
          }
          return;
        }
      }

      if (this.fun.isCPS() && this.fun.isCPSAPPI() && item.isMinApp == "6") {
        let json = item.app_link;
        console.log(json)
        if (this.fun.isIosOrAndroid() === "ios") {
          toAPPUrlIOS({ body: "toAPPUrlIOS", json: JSON.stringify(json) });
        } else {
          console.log('toAPPUrlAndroid===========',JSON.stringify(json))
          toAPPUrlAndroid(JSON.stringify(json));
        }
      } else if (item.link && item.link !== window.location.href) {
        let URL = item.link;
        if (this.fun.getKeyByMid()) {
          URL = this.fun.changeUrlArg(item.link, "mid", this.fun.getKeyByMid());
        }
        if(this.fun.isWindVane()) {
          params = { target: URL };
          window.WindVane.call('SBase','navigationTo',params,function(e){},function(e){});
          return;
        }
        window.location.href = URL;
      }
    },
    //选中菜单级别
    selectedMenuLevel() {
      if (this.selectedMenuIndex !== "" && this.selectedSubMenuIndex === "") {
        //主菜单
        return 1;
      } else if (this.selectedMenuIndex !== "" && this.selectedSubMenuIndex !== "") {
        //子菜单
        return 2;
      } else {
        //未选中任何菜单
        return 0;
      }
    },
    urlParse(urls, isChoose) {
      if (urls != undefined) {
        //http://umeiga.com/addons/yun_shop/?menu#/cart?i=8
        //   url= >   /cart?
        var url = urls.match(/#\/(\S*)\?/);
        if (url instanceof Array && url[1] != undefined) {
          let newUrl = "/" + url[1];
          if (this.isChoose == "/newDiy" || (this.isChoose == "/member" && this.page_id)) {
            // 装修页面高亮
            if (this.page_id) {
              return (new RegExp("[?|&]page_id=" + "([^&;]+?)(&|#|;|$)").exec(urls) || [, ""])[1].replace(/\+/g, "%20"); //定义正则表达式
            } else {
              return "-1";
            }
          } else if (url != undefined) {
            // 匹配路由
            if (newUrl == this.isChoose) {
              return newUrl;
            } else {
              return "-1";
            }
          } else {
            return "-1";
          }
        } else {
          // 装修页面高亮
          if ((this.isChoose == "/newDiy" || this.isChoose == "/member") && this.page_id) {
            return (new RegExp("[?|&]page_id=" + "([^&;]+?)(&|#|;|$)").exec(urls) || [, ""])[1].replace(/\+/g, "%20"); //定义正则表达式
          } else {
            return "-1";
          }
        }
      } else {
        return "";
      }
    },
    getPi() {
      const PI = 3.1415926535;
      let angle = 0;
      let R = 180;
      let n = 5;
      let top = 0;
      let left = 0;

      angle = 180 / n;

      for (let i = 0; i < n; i++) {
        let ang = (i * angle * PI) / 90;
        if (ang >= 0 && ang < PI / 2) {
          top = R - R * Math.cos(ang);
          left = R + R * Math.sin(ang);
        }
        if (ang >= PI / 2 && ang < PI) {
          top = R + R * Math.cos(ang);
          left = R - R * Math.sin(ang);
        }
        if (ang >= PI && ang <= (PI * 3) / 2) {
          top = R - R * Math.cos(ang);
          left = R + R * Math.sin(ang);
        }
        if (ang >= (PI * 3) / 2 && ang <= PI * 2) {
          top = R + R * Math.cos(ang);
          left = R - R * Math.sin(ang);
        }
        console.log(top, left);
      }
      return 0;
    },
    getCirclePosition({ x, y, r, nodeNum, nodeIndex, changeAngle = 210 }) {
      // 获取平分的角度
      let angle = 180 / nodeNum;
      // 获取当前角度值
      let currentAngle = angle * nodeIndex;
      // 调整这个角度，即可变换初始角度
      let _angle = ["", "270", "225", "210", "200", "200"];
      currentAngle = currentAngle + Number(_angle[nodeNum]);
      // if (changeAngle) {
      //   currentAngle = currentAngle + changeAngle;
      // }
      // 圆上点的x_
      let x_ = x + r * Math.cos((currentAngle * Math.PI) / 180);
      // 圆上点的y_
      let y_ = y + r * Math.sin((currentAngle * Math.PI) / 180);

      return {
        x_,
        y_
      };
    },

    getSubPosition(sub,i2) {
      // 圆弧上点的个数
      // return {}
      if(!sub || !sub.length) {
        return {};
      }
      let length = sub.length;
      let position = this.getCirclePosition({
        x: 110,
        y: 110,
        r: 110,
        nodeNum: length,
        nodeIndex: i2
      });
      let left = position.x_ - 12 + "px";
      let top = position.y_ + 25 + "px";
      return {
        width: 'auto',
        left: left,
        top: top
      };
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

ul {
  padding: 0;
}

li {
  list-style: none;
}

.component-wrapper {
  position: relative;
}

.advertising-preview {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  width: 100%;
}

.advertising-preview.iphoneXStyle {
  padding-bottom: 34px;
}

.advertising-preview .weixin-menu {
  margin-bottom: 0;
  height: 50px;
}

/* 一级 */
.advertising-preview .weixin-menu .menu-item {
  max-width: 100%;
  position: relative;
  height: 100%;
  text-align: center;
  flex: 1;
  cursor: pointer;
  color: #616161;
}

/* 二级 */
.advertising-preview .weixin-sub-menu {
  position: absolute;
  bottom: 51px;
  left: -1px;
  width: 0;
  height: 0px;

  /* border-top: 1px solid #d0d0d0; */
  background: #fafafa;
  display: block;
  padding: 0;
  z-index: -1;
}


.advertising-preview .weixin-sub-menu .menu-sub-item {
  line-height: 50px;
  height: 50px;
  text-align: center;
  width: 100%;

  /* border: 1px solid #d0d0d0; */
  cursor: pointer;
  position: relative;
  color: #616161;
  box-sizing: content-box;
}

.advertising-preview .menu-arrow {
  position: absolute;
  left: 50%;
  margin-left: -6px;
}

.advertising-preview .arrow_in {
  bottom: -4px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px 6px 0;
  border-style: solid dashed dashed;
  border-color: #fafafa transparent transparent;
}

.advertising-preview .arrow_out {
  bottom: -5px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px 6px 0;
  border-style: solid dashed dashed;
  border-color: #d0d0d0 transparent transparent;
}
.currentImage, .currentSubImage {
  display: none!important;
}

.advertising-preview .menu-item .menu-item-title,
.advertising-preview .menu-sub-item .menu-item-title {
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.advertising-preview .menu-item .menu-item-title span,
.advertising-preview .menu-sub-item .menu-item-title span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.advertising-preview .weixin-sub-menu.show {
  display: block;
}

.advertising-preview .icon_menu_dot {
  // background: url({{ plugin_assets('wechat', 'assets/images/plus.png') }}) 0px -36px no-repeat;
  width: 7px;
  height: 7px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 2px;
  margin-top: -2px;
}

.advertising-preview .icon14_menu_add {
  // background: url({{ plugin_assets('wechat', 'assets/images/plus.png') }}) 0px 0px no-repeat;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -2px;
}
.only-img {
  flex: 1;
  overflow: hidden;
  margin-top: -6px;
  max-height: 100%;
  img {
    padding: 6px;
    max-height: 50px;
    width: 50px;
  }
}
.img-text .icon-img{
  height: 21px;
}

.icon-img {
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.weixin-sub-menu .icon-img {
  width: 20px;
  height: 20px;
  margin-top: 0;
}

.menu-icon {
  font-size: 20px;
  vertical-align: sub;
}

.minLink {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.menu-text {
  font-size: 12px;
}

.posNew {
  position: relative;
}

.newTbox1 {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
}

.newTbox2 {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
}

.newTbox3 {
  position: absolute;
  top: 0.3rem;
  right: 0.1rem;
}

.colorTxt {
  background-color: #f42a2a;
  border-radius: 0.35rem;
  padding: 0 0.219rem;
  height: 1rem;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 12px;
}
.advertising-preview .showBlock {
  width: 100%;
  height: auto;
}
.advertising-preview .showBlock.Circle-main {
  bottom: -10px!important;
}

.advertising-preview  .weixin-menu .Circle-main {
  position: absolute;
  bottom: -220px;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  .menu-sub-item {
    position: absolute;
    transition: 1s;
    width: auto;
  }
  .menu-item-title {
    background: transparent!important;
  }
}
.advertising-preview .weixin-menu .Circle-main .menu-sub-item .only-img {
  width: auto;
  height: 100%;
}



.rotateImg {
  padding: 3px!important;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transition: transform 0.5s;
}

.normalImg {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transition: transform 0.5s;
}
</style>
